<template>
	<div class="PreviewChapter_type1">
		<PreviewText>
			<span slot="title">剪影流殇，光影华年</span>
			<span slot="content">染指流沙，回绕不尽的世界繁华； 青灯孤伴，镌刻不完的午夜落花； 锦帛残卷，撰写不到的城南旧事； 蓦然回首，消逝不见的绝美年华。</span>
		</PreviewText>
		<div class="image">
			<a href="#" v-lazy:background-image="$store.getters.getImgURL(300,300,1)"></a>
			<a href="#" v-lazy:background-image="$store.getters.getImgURL(300,300,2)"></a>
			<a href="#" v-lazy:background-image="$store.getters.getImgURL(300,300,3)"></a>
		</div>
		<PreviewFoot></PreviewFoot>
	</div>
</template>

<script>
	import PreviewText from "./PreviewText";
	import PreviewFoot from "./PreviewFoot";
	export default {
		name: "PreviewChapter_type1",
		components: {PreviewFoot, PreviewText},
		data() {
			return {

			}
		}
	}
</script>

<style scoped>
	@media screen and (max-width: 992px) {
		.PreviewChapter_type1 {
			padding: 0 1rem;
		}
	}
	@media screen and (min-width: 993px) {

	}
	.image {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: .15rem;
	}
	.image a {
		display: inline-block;
		width: 30%;
		padding-bottom: 20%;
		background-size: cover;
		border-radius: .05rem;
	}
	.image a[lazy="loading"] {
		background-size: auto 50%;
		background-repeat: no-repeat;
		background-position: center;
	}
	.image a[lazy="error"] {
		background-size: 100% 100%;
	}
</style>
